<template>
    <div>
        <el-container>
            <el-header>Header</el-header>
            <el-container>
                <!--左侧面板-->
                <el-aside width="200px">

                    <!--导航菜单开始-->
                    <el-menu :router="true"
                             default-active="2"
                             class="el-menu-vertical-demo"
                             @open="handleOpen"
                             @close="handleClose">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>移动管理</span>
                            </template>
                            <el-menu-item index="/content1_1">号码管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>奥运门票管理</span>
                            </template>
                            <el-menu-item index="/content2_1">门票管理</el-menu-item>
                            <el-menu-item index="/content2_2">订单管理</el-menu-item>
                        </el-submenu>
                        <el-submenu index="3">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>单文件上传</span>
                            </template>
                            <el-menu-item index="/content3_1">添加用户</el-menu-item>
                            <el-menu-item index="/content3_2">用户列表</el-menu-item>
                        </el-submenu>
                        <el-submenu index="4">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>多文件上传</span>
                            </template>
                            <el-menu-item index="/content4_1">添加新商品</el-menu-item>
                        </el-submenu>
                    </el-menu>
                    <!--导航菜单结束-->


                </el-aside>
                <!--中间面板-->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
}

.el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
}

.el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
}

body > .el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}
</style>
<script >
export default {
    data() {
        return {
            isCollapse: true
        };
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}
</script>